import { onBeforeRouteUpdate } from 'vue-router'
import { ReactiveVariable } from 'vue/macros'

type Props = {
	homeScrollContainerRef: ReactiveVariable<HTMLElement>
}

export default (props: Props) => {
	let topHeight = $ref('0px')
	let botHeight = $ref('0px')

	const setBotHeight = (target: HTMLElement) => {
		let botH = ~~(target.scrollHeight - (target.scrollTop + target.clientHeight)) * 3
		botH = botH > 50 ? 50 : botH
		botHeight = botH + 'px'
	}
	const setTopHeight = (target: HTMLElement) => {
		let topH = target.scrollTop * 3
		topH = topH > 50 ? 50 : topH
		topHeight = topH + 'px'
	}

	onMounted(() => {
		setBotHeight(props.homeScrollContainerRef)
	})

	onBeforeRouteUpdate(() => {
		setTimeout(() => {
			setTopHeight(props.homeScrollContainerRef)
			setBotHeight(props.homeScrollContainerRef)
		}, 350)
	})

	const handleHomeContScroll = (e: UIEvent) => {
		const target = e.target as HTMLElement
		setTopHeight(target)
		setBotHeight(target)
	}

	return {
		/** 顶部渐变元素高度 */
		topHeight,
		/** 底部渐变元素高度 */
		botHeight,
		/** 容器滚动事件 */
		handleHomeContScroll
	}
}
